<script setup>
import {ref,reactive} from 'vue'
const nr=ref('好好学习，天天向上')
const list1=reactive([])
function add(){
    list1.push(nr.value)
}
function del(index){
     list1.splice(index, 1)
}
function clear1(){
    list1.splice(0,list1.length)
}
</script>
<template>
    <div class="root">
        <div class="main">
            <div class="context">
                <div class="header">
                <h1 class="title">小黑记事本</h1>
                </div>
                <input type="text" v-model="nr" placeholder="请输入内容" class="inputA" v-on:keyup.enter="add"/>
                <ul>
                    <li v-for="(item,index) in list1" class="for">
                        <span>{{ index+1}}.</span> <span>{{item}}</span><img src="/public/no.png" class="img1" @click="del(index)" /></li>
                        
                    <li v-show="list1.length !=0">
                        <span>{{ list1.length}} items left </span> <span @click="clear1">clear</span>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</template>
<style scoped>
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.root{
    text-align: center;
}
.main{
    weight:1200px;
    display: block;
    border-color: azure;
    margin-left: 25%;
     height: 100000px;
    
}
.title{
    font-size: 60px;
    color: red;
    margin-bottom: 60px;
}
.context{
    border-radius: 10px;
    border: 1px solid rebeccapurple;
    width: 900px;
     color: grey;
     background-color: white;
     box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.4), 20px 20px  40px rgba(0, 0, 0, 0.4);
     position: relative;

}
.context::before{
    content: '';
    position: absolute;
    /* 定位：比元素大一圈（模拟轮廓在外部） */
    left: -40px; /* 左偏移 */
    right: -40px; /* 右偏移 */
    bottom: -40px; /* 下偏移 */
    /* 圆角：与元素保持一致或稍大 */
    border-radius: 20px; /* 比元素自身圆角大4px（匹配偏移量） */
    /* 轮廓样式：实线 + 颜色（可替换为阴影） */
    border: 20px solid #4285f4;
    /* 关键：不占用鼠标事件（避免干扰元素交互） */
    pointer-events: none;
   height: 1000px;
        width: 1200px;
    background: #000;
    z-index: -1;
}
.inputA{
    width: 100%;
    text-align: left; 
    font-size: 60px;
    padding-left: 20px;
    outline: none;
    border: none;
    height: 80px;
    border: 1px solid gray ;
     color: grey;
    
}

li{
    text-align: left;
    border: 1px solid gray;
    margin-top: 10px;
    font-size: 50px;
    font: bold;
    height: 80px;
    padding-bottom: 90px;


}
 .img1{
    float: right;
    width: 40px;
    display:none;
    padding-top: 10px;
    height: 70px;
    margin-right: 20px;

    
}
 li:hover .img1{
    display:block;
    
 }
 li:last-child{
    padding: 0px;
    height: 70px;
    margin: 0px;
 }
 li:last-child span:first-child{
    font-size: 32px;
    margin-left: 30px;
    float: left;
    
 }
 li:last-child span:last-child{
    float: right;
    padding: 0px 5px;
    font-size: 40px;
    cursor: pointer;
    margin-right: 20px;

 }
  li:last-child span:last-child:hover{
   text-decoration: underline;

 }
.for span:first-child{
    padding-left: 5px;
    display: inline-block;
    width: 70px;
    font-size: 35px;
    margin-left: 20px;
   
}
</style>